<template>
  <div class="container">
    <!-- <el-tabs v-model="activeTab" class="table-tabs" @tab-click="handleClick">
      <el-tab-pane label="酸轧2280" name="tcm2280"></el-tab-pane>
      <el-tab-pane label="连退1630" name="cal1630"></el-tab-pane>
      <el-tab-pane label="连退2150" name="cal2150"></el-tab-pane>
      <el-tab-pane label="镀锌1870" name="cgl1870"></el-tab-pane>
    </el-tabs> -->
    <el-container>
      <el-header>
        <div class="sreach-header">
          <el-form :inline="true" :model="searchForm" class="header-form search-form">
            <el-form-item>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ curLine }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="tcm2280">酸轧2280</el-dropdown-item>
                    <el-dropdown-item command="cal1630">连退1630</el-dropdown-item>
                    <el-dropdown-item command="cal2150">连退2150</el-dropdown-item>
                    <el-dropdown-item command="cgl1870">镀锌1870</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-form-item>
            <el-form-item label="开始时间" class="time-period-picker">
              <el-date-picker v-model="searchForm.startDate" type="date" placeholder="开始时间" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="结束时间" class="time-period-picker">
              <el-date-picker v-model="searchForm.endDate" type="date" placeholder="结束时间" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <div class="table-container">
          <el-table
            :data="tableData"
            height="56vh"
            :header-cell-style="{
              background: '#083885',
              color: '#ddd',
              textAlign: 'center',
              border: '1px solid rgba(255,255,255,0.18)',
              borderBottom: '1px solid rgba(255,255,255,0.28)',
            }"
            :cell-style="{
              textAlign: 'center',
            }"
            :span-method="spanFunc"
            border
          >
            <el-table-column prop="crew" label="班组" />
            <el-table-column prop="area" label="区域" />
            <el-table-column prop="techCount" label="工艺项" />
            <el-table-column prop="sucCount" label="合格项数量" />
            <el-table-column prop="rate" label="合格率" />
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div class="graph">
          <rate-line :data1="graphData.y1" :datax="graphData.x" :title="'已生产卷合格率'" style="margin-bottom: 1vh" :data-name="['合格率(%)']" />
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, watch, onUnmounted, computed } from 'vue';
  import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
  import type { TabsPaneContext } from 'element-plus';
  import rateLine from './components/rateLine.vue';
  import dayjs from 'dayjs';
  import { rateApi } from '/@/api/report/processParameter/index';
  import { ArrowDown } from '@element-plus/icons-vue';

  const tabTextMap: Record<string, string> = {
    tcm2280: '酸轧2280',
    cal1630: '连退1630',
    cal2150: '连退2150',
    cgl1870: '镀锌1870',
  };

  type ActiveTabKey = keyof typeof tabTextMap | string;
  const activeTab = ref<'tcm2280' | 'cal1630' | 'cal2150' | 'cgl1870'>('tcm2280');
  const curLine = computed(() => {
    return tabTextMap[activeTab.value as ActiveTabKey] ?? '酸轧2280';
  });
  const handleCommand = (command: 'tcm2280' | 'cal1630' | 'cal2150' | 'cgl1870') => {
    activeTab.value = command;
    fetchData();
  };

  const searchForm = reactive({
    startDate: '',
    endDate: '',
  });

  interface GraphData {
    x: string[];
    y1: number[];
    y2?: number[];
    other?: any[];
  }

  const graphData = reactive<GraphData>({
    x: [],
    y1: [],
    other: [],
  });

  // 搜索方法
  const handleSearch = async () => {
    fetchData();
  };

  // 重置方法
  const handleReset = async () => {
    searchForm.startDate = '';
    searchForm.endDate = '';
    fetchData();
  };

  const spanFunc = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
    if (columnIndex === 0) {
      if (rowIndex % 3 === 0) {
        return { rowspan: 3, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }
  };

  const tableData = ref([
    // 甲班数据
    {
      crew: '甲班',
      area: '入口段',
      item: '1',
      passCount: '',
      passRate: '',
    },
    {
      crew: '甲班',
      area: '酸洗段',
      item: '9',
      passCount: '',
      passRate: '',
    },
    {
      crew: '甲班',
      area: '轧制段',
      item: '16',
      passCount: '',
      passRate: '',
    },
    // 乙班数据
    {
      crew: '乙班',
      area: '入口段',
      item: '1',
      passCount: '',
      passRate: '',
    },
    {
      crew: '乙班',
      area: '酸洗段',
      item: '9',
      passCount: '',
      passRate: '',
    },
    {
      crew: '乙班',
      area: '轧制段',
      item: '16',
      passCount: '',
      passRate: '',
    },
    // 丙班数据
    {
      crew: '丙班',
      area: '入口段',
      item: '1',
      passCount: '',
      passRate: '',
    },
    {
      crew: '丙班',
      area: '酸洗段',
      item: '9',
      passCount: '',
      passRate: '',
    },
    {
      crew: '丙班',
      area: '轧制段',
      item: '16',
      passCount: '',
      passRate: '',
    },
    // 丁班数据
    {
      crew: '丁班',
      area: '入口段',
      item: '1',
      passCount: '',
      passRate: '',
    },
    {
      crew: '丁班',
      area: '酸洗段',
      item: '9',
      passCount: '',
      passRate: '',
    },
    {
      crew: '丁班',
      area: '轧制段',
      item: '16',
      passCount: '',
      passRate: '',
    },
  ]);

  const fetchData = async () => {
    const params = {
      ...searchForm,
      lineCode: activeTab.value,
    };
    try {
      const res = await rateApi.rateList(params);
      tableData.value = res.data.data;
      const res2 = await rateApi.sucRate(params);
      graphData.x = res2.data.data.x;
      graphData.y1 = res2.data.data.y;
      console.log('x' + graphData.x); //x2025-11-01,2025-11-02,2025-11-03,2025-11-04,2025-11-05,2025-11-06,2025-11-07
      console.log('y' + graphData.y1); // y0.78,1.37,5.86,1.64,5.8,1.44,0
      ElMessage.success('加载成功');
    } catch (error) {
      ElMessage.error('加载失败');
    }
  };
  onMounted(() => {
    searchForm.startDate = dayjs().subtract(6, 'day').format('YYYY-MM-DD');
    searchForm.endDate = dayjs().format('YYYY-MM-DD');
    fetchData();
  });
</script>
<style lang="less" scoped>
  @import '/src/views/reportforms/customized/processParameter/deepElement.css';

  .container {
    width: 99%;
    position: relative;
    min-height: 110vh;
    margin-bottom: 1vh;
    background: url(/@/assets/images/home/body-bg.jpg) no-repeat;
    // height: auto;
    // overflow: auto;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .table-container {
    padding: 12px;
    min-height: 60vh;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 47, 106, 0.28), rgba(11, 47, 106, 0.18));
    border: 1px solid rgba(207, 227, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(11, 47, 106, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  .graph {
    height: 30vh;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 47, 106, 0.28), rgba(11, 47, 106, 0.18));
    border: 1px solid rgba(207, 227, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(11, 47, 106, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
</style>
